import React, { useState, useEffect } from 'react';
import './index.scss'
import { Button, Form, Select, Input, notification } from 'antd';
import { FormOutlined, VerticalRightOutlined, DeleteOutlined } from '@ant-design/icons';
import MyTable from '../../../../../components/MyTable';
import * as XLSX from 'xlsx'
import fs from 'file-saver'
import { useNavigate } from 'react-router-dom';
import service from '../../../../../api';
const AddEnter = () => {
    var history = useNavigate()
    var [dataList, setDataList] = useState([])
    var excelExport = (table: any, filename: any) => {

        // 解析dom元素
        const wb = XLSX.utils.table_to_book(table)

        /* Export to file (start a download) */
        const defaultCellStyle = {
            font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },
            fill: { fgColor: { rgb: 'FFFFAA00' } },
        }

        const wopts: any = {
            bookType: 'xlsx',
            bookSST: false,
            type: 'binary',
            cellStyle: true,
            defaultCellStyle: defaultCellStyle,
            showGridLines: false,
        }

        //生成xlsx格式的数据
        const wbout = XLSX.write(wb, wopts)

        var data: any = [s2ab(wbout)];

        //转换成二进制Blob类型的数据
        const blob = new Blob(data, { type: 'application/octet-stream' })

        //文件另存为
        fs.saveAs(blob, filename + '.xlsx')
    }
    var s2ab = (s: any) => {
        if (typeof ArrayBuffer !== 'undefined') {
            const buf = new ArrayBuffer(s.length);
            const view = new Uint8Array(buf);
            for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
            return buf;
        } else {
            const buf = new Array(s.length);
            for (let i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
            return buf;
        }
    }
    var handleExcelExport = () => {
        var table = document.querySelector('table');
        excelExport(table, 'download.xlsx');
    }
    const layout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
    };
    var columns: any = [
        {
            title: '单号',
            key: 'number',
            dataIndex: 'number'
        },
        {
            title: '客户',
            key: 'customer',
            dataIndex: 'customer'
        },

        {
            title: '生产线',
            key: 'type',
            render: (_: any, record: any, index: any) => {
                if (record.type == '0') {
                    return '采购入库'
                } else {
                    return '采购退货'
                }
            }
        },

        {
            title: '成色',
            key: 'quality',
            dataIndex: 'quality'
        },

        {
            title: '数量',
            key: 'amount',
            dataIndex: 'amount'
        },

        {
            title: '重量',
            key: 'weight',
            dataIndex: 'weight'
        },

        {
            title: '状态',
            key: 'status',
            render: (_: any, record: any, index: any) => {
                if (record.type == '0') {
                    return '未开始'
                } else if (record.type == '1') {
                    return '未审批'
                } else if (record.type == '2') {
                    return '进行中'
                } else if (record.type == '3') {
                    return '成功'
                } else {
                    return '失败'
                }
            }
        },
        {
            title: '消费',
            key: 'cost',
            dataIndex: 'cost'
        },
        {
            title: '区域',
            key: 'area',
            dataIndex: 'area'
        }
    ]
    useEffect(() => {
        requsetList()
    }, [])
    var requsetList = async () => {
        var res = await service.cxl.enterList()
        res.data.data.data.forEach((item: any, index: any) => {
            item.key = index
        })
        setDataList(res.data.data.data)
    }
    const onFinish = async (values: any) => {
        var res = await service.cxl.Addenter(values)
        if (res.data.code == 200) {
            notification.success({ message: '新增成功!' });
            var newList = JSON.parse(JSON.stringify(dataList))
            newList.push(values)
            newList.forEach((item: any, index: any) => {
                item.key = index
            })
            setDataList(newList)
        }
    }
    const goBack = () => {
        history(-1)
    }
    return (

        <div className='addenter'>
            <Form
                className='form'
                onFinish={onFinish}
                {...layout}
            >
                <div className='title'>
                    <span className='text'>新增入库单</span>
                    <span className='btn'>
                        <Button>保存</Button>

                        <Button type="primary" htmlType="submit"><FormOutlined />提交</Button>

                        <Button type="primary" onClick={goBack}><VerticalRightOutlined />取消</Button>

                    </span>
                </div>
                <div className='text1'>
                    基本信息
                </div>
                <div className='items'>

                    <Form.Item
                        style={{ width: '30%' }}
                        label="表单类型"
                        name="type"
                        rules={[{ required: true, message: '请选择表单类型' }]}
                    >
                        <Select

                            options={[
                                { value: 0, label: '采购入库' },
                                { value: 1, label: '采购退货' },
                            ]}
                        />
                    </Form.Item>


                    <Form.Item
                        style={{ width: '30%' }}
                        label="状态"
                        name="status"
                        rules={[{ required: true, message: '请选择状态' }]}
                    >
                        <Select
                            options={[
                                { value: 0, label: '未开始' },
                                { value: 1, label: '未审批' },
                                { value: 2, label: '进行中' },
                                { value: 3, label: '成功' },
                                { value: 4, label: '失败' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item
                        style={{ width: '30%' }}
                        label="重量"
                        name="weight"

                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="成色"
                        name="quality"
                        style={{ width: '30%' }}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="客户"
                        name="customer"
                        style={{ width: '30%' }}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="消费"
                        name="cost"
                        style={{ width: '30%' }}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="区域"
                        name="area"
                        style={{ width: '30%' }}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="数量"
                        name="amount"
                        style={{ width: '30%' }}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="单号"
                        name="number"
                        style={{ width: '30%' }}
                    >
                        <Input />
                    </Form.Item>
                </div>

            </Form>
            <div className='table'>
                <div className='title1'>
                    <div className='text1'>
                        产品信息
                    </div>
                    <div>
                        <Button onClick={handleExcelExport}>导出</Button>
                        <Button type="primary">添加</Button>
                    </div>
                </div>

                <MyTable data={dataList} columns={columns} />
            </div>
        </div >
    );
};

export default AddEnter;